<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .input_pin {
            width: 128px;
        }

        #pin_text {
            height: 24px;
            padding: 8px 28px 8px;
            width: 80px;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 12px;
            text-align: center;
            background: #fff;
            color: #3F94EF;
            border: 1px dashed #dbdbdb;
        }

        .register_input {
            margin-top: 0;
        }

        .login_info {
            margin-top: 0;
            color: #e85759;
            display: none;
        }

        .login_info i {
            color: #e85759;
            transform: translateY(-5px);
        }

        .info_text {
            height: 24px;
            padding: 2px 28px;
        }

        .active {
            display: block;
        }

        #info_msg {
            color: #3F94EF;
        }

        #info_msg i {
            color: #3F94EF;
        }
    </style>
</head>

<body>
    <div class="main">
        <h2>注册</h2>
        <div class="center">
            <!-- <form id="myform"> -->
            <div class="login_input">
                <i class="fa fa-user fa-lg"></i>
                <input id="js_phone" class="input_text" type="text" name="username" placeholder="手机号">
            </div>
            <div class="login_input login_info" id="phone_info_msg">
                <i class="fa fa-exclamation-circle fa-fw"></i>
                <p class="info_text" id="phone_info"></p>
            </div>
            <div class="login_input">
                <i class="fa fa-lock fa-lg"></i>
                <input id="js_password" class="input_text" type="password" name="password" placeholder="密码">
            </div>
            <div class="login_input login_info" id="pwd_info_msg">
                <i class="fa fa-exclamation-circle fa-fw"></i>
                <p class="info_text" id="pwd_info"></p>
            </div>
            <div class="login_input">
                <i class="fa fa-lock fa-lg"></i>
                <input id="js_password_confirm" class="input_text" type="password" name="password" placeholder="密码确认">
            </div>
            <div class="login_input login_info" id="pwd_confirm_info_msg">
                <i class="fa fa-exclamation-circle fa-fw"></i>
                <p class="info_text" id="pwd_confirm_info"></p>
            </div>
            <div class="login_input clearfix">
                <i class="fa fa-envelope fa-fw"></i>
                <input id="js_pin" class="input_text input_pin left" type="text" name="pin" placeholder="验证码">
                <input class="right" id="pin_text" type="text" disabled value="6666">
            </div>
            <div class="login_input login_info" id="pin_info_msg">
                <i class="fa fa-exclamation-circle fa-fw"></i>
                <p class="info_text" id="pin_info"></p>
            </div>
            <div class="login_input register_input">
                <input id="js_register" class="btn_login" type="submit" name="submit" value="注 册">
            </div>
            <div class="login_input login_info" id="info_msg">
                <i class="fa fa-exclamation-circle fa-fw"></i>
                <p class="info_text" id="info"></p>
            </div>
            <!-- </form> -->
        </div>
    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/jquery.cookie.js"></script>
    <script>
        var phoneNumber = ["13266668888", "13566668888", "13666668888", "13766668888", "13866668888", "13966668888"];

        function sleep(numberMillis) {
            var now = new Date();
            var exitTime = now.getTime() + numberMillis;
            while (true) {
                now = new Date();
                if (now.getTime() > exitTime)
                    return;
            }
        }

        $("#js_register").on("click", function () {
            var phone_text = $("#js_phone").val();
            var password_text = $("#js_password").val();
            var password_confirm_text = $("#js_password_confirm").val();
            var pin_text = $("#js_pin").val();

            var phone_flag = false;
            var pwd_flag = false;
            var pwd_pin_flag = false;
            var pin_flag = false;

            if (phone_text.length == 0) {
                $("#phone_info_msg").addClass("active");
                $("#phone_info").text("手机号不能为空");
            } else if (/^[0-9][0-9]{10}$/.test(phone_text) == false) {
                $("#phone_info_msg").addClass("active");
                $("#phone_info").text("手机号格式不正确");
            } else if (phoneNumber.indexOf(phone_text) != -1) {
				$("#phone_info_msg").addClass("active");
                $("#phone_info").text("该账号已经注册");
			} else {
                $("#phone_info_msg").removeClass("active");
                $("#phone_info").text("");
                phone_flag = true;
            }

            if (password_text.length == 0) {
                $("#pwd_info_msg").addClass("active");
                $("#pwd_info").text("密码不能为空");
            } else if (password_text.length < 8 || password_text.length > 16) {
                $("#pwd_info_msg").addClass("active");
                $("#pwd_info").text("密码长度为8-16个字符");
            } else {
                $("#pwd_info_msg").removeClass("active");
                $("#pwd_info").text("");
                pwd_flag = true;
            }

            if (password_confirm_text != password_text) {
                $("#pwd_confirm_info_msg").addClass("active");
                $("#pwd_confirm_info").text("两次输入的密码不一样，请重新输入");
            } else {
                $("#pwd_confirm_info_msg").removeClass("active");
                $("#pwd_confirm_info").text("");
                pwd_pin_flag = true;
            }

            if (pin_text != "6666") {
                $("#pin_info_msg").addClass("active");
                $("#pin_info").text("验证码错误");
            } else {
                $("#pin_info_msg").removeClass("active");
                $("#pin_info").text("");
                pin_flag = true;
            }

            if (phone_flag && pwd_flag && pwd_pin_flag && pin_flag) {
                $.cookie(phone_text, password_confirm_text)
                $("#info_msg").addClass("active");
                $("#info").text("注册成功");
                
                setTimeout(function() {
                    $(location).attr('href', './login.html');
                }, 1000); 
            }

            // if (phone_text.length == 0 || password_text.length == 0 || password_confirm_text.length == 0 || pin_text.length == 0 ) {
            //     document.cookie = "register_success=false";
            //     console.log('%c注册失败', 'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;');
            //     $("#register_info").removeClass("success").addClass("fail").text("注册失败");
            // }else if(pin_text == "6666"){
            //     var flag = false;
            //     for (let i = 0; i < phoneNumber.length; i++) {
            //         var num = phoneNumber[i];
            //         if (num == phone_text) {
            //             console.log('%c注册失败', 'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;');
            //             alert("该账号已经注册，请重新注册")
            //             $("#register_info").removeClass("success").addClass("fail").text("该账号已经注册，请重新注册");
            //             flag = true;
            //         }
            //     }
            //     if(!flag){
            //         document.cookie = "register_success=true";
            //         $("#register_info").removeClass("fail").addClass("success").text("注册成功！");
            //         // $(location).attr('href', './login.html');
            //     }
            // }
        });
    </script>
</body>

</html>